<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h2>在About组件中运用Vuex</h2>
    {{$store.state.num}}
    <h2>在About组件中运用Mutations</h2>
    {{$store.state.dnum}}
    <h2>在About组件中通过计算属性computed求vuex全局中state中的cnum数的平方</h2>
    {{square}}
    <h2>在About组件中通过vuex全局中state中的getters方法中square的cnum数的平方</h2>
    {{$store.getters.square}}
    <h2>在About组件中通过vuex全局中state中的getters方法中goodsFilter计算购物车中价格大于20的商品</h2>
    {{$store.getters.goodsFilter}}
    <h2>1.在About组件中通过vuex全局中state中的getters方法中goodsPrices计算购物车中价格大于20的商品总价格</h2>
    {{$store.getters.goodsPrices}}
    <h2>2.在About组件中通过vuex全局中state中的getters方法中goodsPrices计算购物车中价格大于20的商品总价格</h2>
    {{$store.getters.goodsPrices2}}
    <h2>在About组件中通过vuex全局中state中的getters方法中goodsDiyPrices自定义价格大于多少的</h2>
    {{$store.getters.goodsDiyPrices(20)}}
    <hr>
    <h3>num的值：{{$store.state.num}}</h3>
    <button @click="actionNum">Actions</button>
    <button @click="actionNum2">Actions2</button>
    <button @click="actionParamsOne">Actions传一个参</button>
    <button @click="actionParams">Actions传多个参第一种方式</button>
    <button @click="actionParams2">Actions传多个参第二种方式</button>
  </div>
</template>
<script>
export default {
  computed:{
    square(){
      return this.$store.state.cnum * this.$store.state.cnum;
    }
  },
  methods:{
    actionNum(){
      // 调用store中index.js中actions中test方法来改变num的值
      this.$store.dispatch('test');
    },
    actionNum2(){
      // 调用store中index.js中actions中change方法来改变num的值
      this.$store.dispatch('change');
    },
    //传一个参数
    actionParamsOne(){
      // 调用store中index.js中paramsOne中test方法来改变num的值
      this.$store.dispatch('paramsOne',33);
    },
    //传多个参数第一种方式
    actionParams(){
      // 调用store中index.js中params中test方法来改变num的值
      this.$store.dispatch('params',{name:'vuex',id:4});
    },
    //传多个参数第二种方式
    actionParams2(){
      const payload = {name:'vuex',id:4}
      // 调用store中index.js中params2中test方法来改变num的值
      this.$store.dispatch({
          type:'params2',
          payload
      });
    }
  }
}
</script>
